<template>
  <div>
    <el-card v-loading="loading">
      <div>
        <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
          <el-table-column fixed type="index" width="68" align="center">
          </el-table-column>
          <el-table-column fixed width="100" align="center" label="周次">
            <template slot-scope="scope">
              第{{ scope.$index + 1 }}周
            </template>
          </el-table-column>
          <el-table-column v-for="(item, index) in weekDays" :key="index" :label="item" align="center">
            <template slot-scope="scope">
              <div @click="toggleStatus" v-if="scope.row[index]">
                <el-badge v-if="scope.row[index].type != 2" type="primary" is-dot class="item">{{ scope.row[index].day }}</el-badge>
                <span v-else>{{ scope.row[index].day }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      termId: 1,
      weekDays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() { // 获取校历列表
      this.tableData = []
      this.loading = true
      request.get('/items/labAppointmentCondition/calendar', { params: {
        termId: this.termId
      }}).then(res => {
        let j = 0
        this.tableData.push([])
        for (let i = 0; i < res.content.length; i++) {
          if (res.content[i].week_of_term !== j + 1) {
            j++
            this.tableData.push([])
            this.tableData[j].push({
              day: res.content[i].day,
              type: res.content[i].type
            })
          } else {
            this.tableData[j].push({
              day: res.content[i].day,
              type: res.content[i].type
            })
          }
        }
        this.loading = false
      })
    },
    toggleStatus() {
      alert('确定要禁用当日开放预约吗')
    }
  }
}
</script>
<style>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>